<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/head.jsp" />
    <link href="${basePath}/resources/zheng-admin/plugins/sort_plugin/css/style.css" rel="stylesheet"/>
    <link href="${basePath}/resources/manage/css/product/product/create.css" rel="stylesheet"/>
    <link href="${basePath}/resources/zheng-admin/plugins/jqueryStep/css/jquery.step.css" rel="stylesheet"/>
</head>
<body>
<div class="contains">
    <div id="step">
    </div>
    <div class="sortContains" id="categoryDiv" hidden>
        <!--商品分类-->
        <div class="wareSort clearfix">
            <ul id="sort1"></ul>
            <ul id="sort2" style="display: none;"></ul>
            <ul id="sort3" style="display: none;"></ul>
        </div>
        <div class="selectedSort"><p>您当前选择的商品类别是：</p><i id="selectedSort"></i></div>
        <div class="wareSortBtn">
            <input id="makeProduct" type="button" value="下一步" disabled="disabled"/>
        </div>
    </div>
    <form class="layui-form layui-form-pane">
        <div class="productDiv" id="productDiv" style="display:block">
            <div id="productInfo" class="div-info">
                <div class="div-info-title">
                    <p>商品属性</p>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入商品名称"
                               class="layui-input" value="${product.name}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品分类</label>
                    <div class="layui-input-inline" style="width: 81%;">
                        <input name="productCategoryId" type="hidden" lay-verify="required">
                        <input type="text" class="layui-input" name="productCategoryName" readonly="readonly">
                    </div>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" onclick="doCategory()">编辑
                    </button>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌</label>
                    <div class="layui-input-inline">
                        <select name="brandId" lay-verify="required" lay-search="" id="brandDiv">
                            <option value="">请选择品牌</option>
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">在选项框中输入想寻找的品牌，即可搜索匹配的品牌</div>
                </div>
            </div>
            <div id="productImage" class="div-info">
                <div class="div-info-title">
                    <p>商品图片</p>
                </div>
                <div id="productImg">
                    <div class="layui-upload">
                        <div class="image-list">
                            <div class="layui-upload-list product-image-list">
                                <c:if test="${not empty imageList[0]}">
                                    <i class="layui-icon deleteImage" style="visibility: visible"
                                       onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${imageList[0]}" class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image" value="${imageList[0]}">
                                </c:if>
                                <c:if test="${empty imageList[0]}">
                                    <i class="layui-icon deleteImage" onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${basePath}/resources/manage/image/noImg.png"
                                         class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image">
                                </c:if>
                            </div>
                            <p>主图</p>
                        </div>
                        <div class="image-list">
                            <div class="layui-upload-list product-image-list">
                                <c:if test="${not empty imageList[1]}">
                                    <i class="layui-icon deleteImage" style="visibility: visible"
                                       onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${imageList[1]}" class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image" value="${imageList[1]}">
                                </c:if>
                                <c:if test="${empty imageList[1]}">
                                    <i class="layui-icon deleteImage" onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${basePath}/resources/manage/image/noImg.png"
                                         class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image">
                                </c:if>
                            </div>
                            <p>细节图</p>
                        </div>
                        <div class="image-list">
                            <div class="layui-upload-list product-image-list">
                                <c:if test="${not empty imageList[2]}">
                                    <i class="layui-icon deleteImage" style="visibility: visible"
                                       onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${imageList[2]}" class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image" value="${imageList[2]}">
                                </c:if>
                                <c:if test="${empty imageList[2]}">
                                    <i class="layui-icon deleteImage" onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${basePath}/resources/manage/image/noImg.png"
                                         class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image">
                                </c:if>
                            </div>
                            <p>细节图</p>
                        </div>
                        <div class="image-list">
                            <div class="layui-upload-list product-image-list">
                                <c:if test="${not empty imageList[3]}">
                                    <i class="layui-icon deleteImage" style="visibility: visible"
                                       onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${imageList[3]}" class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image" value="${imageList[3]}">
                                </c:if>
                                <c:if test="${empty imageList[3]}">
                                    <i class="layui-icon deleteImage" onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${basePath}/resources/manage/image/noImg.png"
                                         class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image">
                                </c:if>
                            </div>
                            <p>细节图</p>
                        </div>
                        <div class="image-list">
                            <div class="layui-upload-list product-image-list">
                                <c:if test="${not empty imageList[4]}">
                                    <i class="layui-icon deleteImage" style="visibility: visible"
                                       onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${imageList[4]}" class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image" value="${imageList[4]}">
                                </c:if>
                                <c:if test="${empty imageList[4]}">
                                    <i class="layui-icon deleteImage" onclick="deleteImg(this)">&#x1007;</i>
                                    <img src="${basePath}/resources/manage/image/noImg.png"
                                         class="selectImage productImage">
                                    <input type="hidden" isMain="true" name="image">
                                </c:if>
                            </div>
                            <p>细节图</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="paramDiv" class="div-info">
                <div class="div-info-title">
                    <p>商品参数</p>
                </div>
                <div id="params">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-normal layui-btn-sm add-param-button" style="float: left"
                            type="button" onclick="showAddParam()">添加参数
                    </button>
                    <div id="addParam" hidden>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="AddParamName" autocomplete="off"
                                   placeholder="请输入新增的参数名称">
                        </div>
                        <div class="param-add-icon" onclick="addParam()">
                            <i class="layui-icon" style="font-size: 22px;">&#xe618;</i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-info">
                <div class="div-info-title">
                    <p>商品描述</p>
                </div>
                <div class="description-div">
                    <script id="description" name="description" type="text/plain">${product.description}</script>
                </div>
            </div>
            <div class="wareSortBtnGroup">
                <div class="wareSortBtnParallel">
                    <input type="button" value="返回上一步" onclick="doCategory()"/>
                </div>
                <div class="wareSortBtnParallel">
                    <input id="makeSku" type="button" lay-submit value="下一步" lay-filter="productForm">
                </div>
            </div>
        </div>
    </form>
    <form class="layui-form layui-form-pane" id="skuForm">
        <div class="productDiv" id="skuDiv">
            <div id="attributeDiv" class="div-info">
                <div class="div-info-title">
                    <p>商品规格</p>
                </div>
                <div id="attributes">
                </div>
            </div>
            <div id="skuInfo" class="div-info" hidden>
                <div class="div-info-title">
                    <p>商品sku</p>
                </div>
                <div id="skus">
                    <table class="layui-table">
                        <thead id="skuTHead">
                        <tr id="thParent" class="sku-tHead-tr">
                        </tr>
                        </thead>
                        <tbody id="skuTBody">
                        </tbody>
                    </table>
                </div>
                <div id="skuImageDiv" hidden>
                    <table class="layui-table">
                        <thead class="sku-tHead-tr">
                        <tr>
                            <th>属性</th>
                            <th>图片</th>
                        </tr>
                        </thead>
                        <tbody id="skuImageTBody"></tbody>
                    </table>
                </div>

            </div>
            <div id="noAttributeSkuInfo" class="div-info" hidden>
            </div>
            <div class="wareSortBtnGroup">
                <div class="wareSortBtnParallel">
                    <input type="button" value="返回上一步" onclick="doProduct()"/>
                </div>
                <div class="wareSortBtnParallel">
                    <input id="makePublish" type="button" lay-submit value="下一步" lay-filter="skuForm">
                </div>
            </div>
        </div>
    </form>
    <form class="layui-form layui-form-pane" id="_form" hidden>
        <div id="productLastInfo" class="div-info">

        </div>
        <div id="skuLastInfo" class="div-info">

        </div>
        <div class="wareSortBtnGroup">
            <div class="wareSortBtnParallel">
                <input type="button" value="返回上一步" onclick="returnSku()"/>
            </div>
            <div class="wareSortBtnParallel">
                <input type="button" value="修改并上架" onclick="submitEditAll(true)">
            </div>
            <div class="wareSortBtnParallel">
                <input type="button" value="仅修改" onclick="submitEditAll(false)">
            </div>
        </div>
    </form>
</div>
<jsp:include page="/resources/inc/footer.jsp" />
<script>
    var productCategoryId;
    var nowCategoryId;
    var productCategoryName;
    var attributeList;
    var paramList;
    var brandId = ${product.brand_id};
    var paramTypes = ${paramTypes};
    var path = "${product.path}";
    var allCategoryUrl = "${basePath}/manage/product/category/all";
    var allBrandUrl = "${basePath}/manage/product/brand/all";
    var updateUrl = "${basePath}/manage/product/product/update";
    var attributeAndParamUrl = "${basePath}/manage/product/product/getAttributeAndParam";
    var $step = $("#step");
    var ueditorUrl = "${ZHENG_OSS_DOMAIN}";
    var basePath = "${basePath}";
    var paramList = ${paramList};
    var productId = ${product.id};
    var productParamList = ${productParamList};
    var attributeKeyList = ${attributeKeyList};
    var productAttributeList = ${productAttributeList};
    var skuImageAttributeList = ${skuImageAttributeList};
    var skuArray = ${skuArray};
</script>
<script src="${basePath}/resources/zheng-admin/plugins/sort_plugin/js/jquery.sort.js"></script>
<script src="${basePath}/resources/zheng-admin/plugins/jqueryStep/js/jquery.step.min.js"></script>
<script src="${basePath}/resources/manage/js/product/product/create.js"></script>
<!-- 配置文件 -->
<script src="${basePath}/resources/zheng-admin/plugins/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script src="${basePath}/resources/zheng-admin/plugins/ueditor/ueditor.all.js"></script>
<script>
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function (action) {
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
            return '${ZHENG_OSS_DOMAIN}/qiniu/oss/uploadUeditor';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
    //设置当前分类
    $(function () {
        if (attributeKeyList.length > 0) {
            initAttribute();
            initAttributeImageTable();
            initSku();
        } else {
            //单独sku
            initNoAttributeSku();
        }
        initCategory();
        initParam();
        function initCategory() {
            $("input[name='productCategoryId']").val(productCategoryId);
            $("input[name='productCategoryName']").val(productCategoryName);
        }

        function initNoAttributeSku() {
            var sku = skuArray[0];
            var divs = '  <div class="div-info-title">' +
                    '<p>sku信息</p> </div>' +
                    ' <input type="hidden" name="id" value="' + sku.id + '">' +
                    ' <div class="layui-form-item"> ' +
                    '<label class="layui-form-label">sku名称</label> ' +
                    '<div class="layui-input-inline">' +
                    ' <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入sku名称" class="layui-input" value="' + sku.name + '">' +
                    ' </div>' +
                    ' <div class="layui-form-mid layui-word-aux"></div> ' +
                    '</div> ' +
                    '<div class="layui-form-item"> ' +
                    '<label class="layui-form-label">sku市场价</label> ' +
                    '<div class="layui-input-inline"> ' +
                    '<input type="text" name="marketPrice" onchange="changePrice(this)"  lay-verify="required" autocomplete="off" placeholder="请输入sku市场价" class="layui-input" value="' + sku.market_price + '"> ' +
                    '</div>' +
                    ' <div class="layui-form-mid layui-word-aux">价格必须是0.01~999999999999.99之间的数字，此价格仅为市场参考售价，请根据该实际情况认真填写。</div> ' +
                    '</div> <div class="layui-form-item"> ' +
                    '<label class="layui-form-label">sku销售价</label> ' +
                    '<div class="layui-input-inline">' +
                    ' <input type="text" name="price" onchange="changePrice(this)" lay-verify="required" autocomplete="off" placeholder="请输入sku销售价" class="layui-input" value="' + sku.price + '">' +
                    ' </div>' +
                    ' <div class="layui-form-mid layui-word-aux">价格必须是0.01~999999999999.99之间的数字，且不能高于市场价。</div> ' +
                    '</div>' +
                    ' <div class="layui-form-item"> ' +
                    '<label class="layui-form-label">sku成本价</label> ' +
                    '<div class="layui-input-inline"> ' +
                    '<input type="text" name="costPrice" onchange="changePrice(this)" lay-verify="required" autocomplete="off" placeholder="请输入sku成本价"class="layui-input" value="' + sku.cost_price + '">' +
                    ' </div>' +
                    '<div class="layui-form-mid layui-word-aux">价格必须是0.00~999999999999.99之间的数字，此价格为商户对所销售的商品实际成本价格进行备注记录，非必填选项</div>' +
                    ' </div>' +
                    ' <div class="layui-form-item">' +
                    ' <label class="layui-form-label">sku库存</label> ' +
                    '<div class="layui-input-inline">' +
                    ' <input type="text" name="inventory" onchange="changeInventory(this)"  lay-verify="required" autocomplete="off" placeholder="请输入sku库存" class="layui-input" value="' + sku.inventory + '">' +
                    ' </div> ' +
                    '<div class="layui-form-mid layui-word-aux">商铺库存数量必须为1~9999999999之间的整数</div> ' +
                    '</div> <div class="layui-form-item"> ' +
                    '<label class="layui-form-label">sku重量</label>' +
                    ' <div class="layui-input-inline"> ' +
                    '<input type="text" name="weight" onchange="changePrice(this)" lay-verify="required" autocomplete="off" placeholder="请输入sku重量" class="layui-input" value="' + sku.weight + '"> ' +
                    '</div> <div class="layui-form-mid layui-word-aux">重量数量必须为0.01~9999999999.99之间的数值</div> ' +
                    '</div>'
            $("#noAttributeSkuInfo").append(divs);
            $("#noAttributeSkuInfo").show();
            $("#attributeDiv").hide();
        }

        function initParam() {
            $(productParamList).each(function (index, productParam) {
                if (typeof(productParam.paramId) == "undefined") {
                    initParamDiv($("#params"), null, productParam);
                } else {
                    $(paramList).each(function (pIndex, param) {
                        if (param.id == productParam.paramId) {
                            initParamDiv($("#params"), param, productParam);
                            return false;
                        }
                    });
                }
            });
        }

        function initAttribute() {
            getAttributeAndParam(productCategoryId, false, true);
            $(attributeKeyList).each(function (index, attributeKey) {
                $(productAttributeList).each(function (pIndex, productAttribute) {
                    if (attributeKey.id == productAttribute.attributeKeyId) {
                        productAttribute.hasImage = attributeKey.hasImage;
                    }
                });
            });
            $(productAttributeList).each(function (index, productAttribute) {
                var div = $("div[keyId='" + productAttribute.attributeKeyId + "']");
                var addDiv = '<div class="layui-form-item" style="margin: 0;"> ' +
                        '<label class="layui-form-label">规格选项</label> ' +
                        '<div class="layui-input-inline">' +
                        '<input type="text" autocomplete="off" class="layui-input" keyId="' + productAttribute.attributeKeyId + '" value="' + productAttribute.attributeValue + '"' +
                        ' onchange="editAttr(this)">' +
                        '</div>';
                addDiv += '<div class="param-add-icon" onclick="deleteAttr(this,' + productAttribute.hasImage + ')">' +
                        '<i class="layui-icon" style="font-size: 22px;">&#x1007;</i> ' +
                        '</div>' +
                        '</div>';
                div.append(addDiv);
            });
        }

        function initAttributeImageTable() {
            var imageNum = 5;
            if (skuImageAttributeList.length > 0) {
                $("#skuInfo").show();
            }
            $(skuImageAttributeList).each(function (index, skuImageAttribute) {
                var randomClass = generateRandomAlphaNum(11);
                var imageTr = '<tr value="' + skuImageAttribute.attributeValue + '" keyId="' + skuImageAttribute.attributeKeyId + '"' +
                        ' key="' + skuImageAttribute.attributeKey + '"><td class="attribute-image-td">' + skuImageAttribute.attributeValue + '</td>' +
                        '<td>';
                var images = JSON.parse(skuImageAttribute.image);
                for (var i = 0; i < imageNum; i++) {
                    var image = images[i];
                    if (typeof(image) == "underfind" || image.length < 1) {
                        image = basePath + "/resources/manage/image/noImg.png";
                        imageTr += '<div class="image-list">' +
                                '<div class="sku-image-list">' +
                                '<i class="layui-icon delete-sku-image" onclick="deleteImg(this)">&#x1007;</i>' +
                                '<img src="' + image + '" class="' + randomClass + '">' +
                                '<input type="hidden" name="image">' +
                                '</div>';
                    } else {
                        imageTr += '<div class="image-list">' +
                                '<div class="sku-image-list">' +
                                '<i class="layui-icon delete-sku-image" onclick="deleteImg(this)" style="visibility: visible">&#x1007;</i>' +
                                '<img src="' + image + '" class="' + randomClass + '">' +
                                '<input type="hidden" name="image" value="' + image + '">' +
                                '</div>';
                    }
                    if (i == 0) {
                        imageTr += '<p>主图</p>';
                    } else {
                        imageTr += '<p>细节图</p>';
                    }
                    imageTr += '</div>';
                }
                imageTr += '</td></tr>';
                $("#skuImageTBody").append(imageTr);
                upload.render({
                    elem: '.' + randomClass
                    , url: ueditorUrl + '/qiniu/oss/upload'
                    , before: function (obj) {
                        var item = this.item;
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $(item).attr('src', result); //图片链接（base64）
                            $(item).prev().css("visibility", "visible");
                        });
                    }
                    , done: function (res) {
                        var item = this.item;
                        var input = $(item).nextAll("input[name='image']");
                        input.val(res.data);
                        //如果上传失败
                        if (res.code < 1) {
                            return layer.msg('上传失败');
                        }
                        //上传成功
                    }
                    , error: function () {
                        return layer.msg('图片上传失败，请稍后再次上传或联系管理员');
                    }
                });
            });
        }

        function initTHead() {
            var attributes = skuArray[0].skuAttributeList
            var nameTh = '<th thName="name">' +
                    '<div id="editName">名称<i class="layui-icon edit-icon" onclick="showBatch(\'Name\',true)">&#xe642;</i></div>' +
                    '<div id="editTdName" hidden><input id="editTdNameInput" onblur="showBatch(\'Name\',false)" onchange="batchEdit(\'name\',this,1)"></div>' +
                    '</th>';
            var priceTh = '<th thName="price">' +
                    '<div id="editPrice">售价<i class="layui-icon edit-icon"  onclick="showBatch(\'Price\',true)">&#xe642;</i></div>' +
                    '<div id="editTdPrice" hidden class="price"><input id="editTdPriceInput" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" onblur="showBatch(\'Price\',false)" onchange="batchEdit(\'price\',this,2)"></div>' +
                    '</th>';
            var marketPriceTh = '<th thName="marketPrice">' +
                    '<div id="editMarketPrice">市场价<i class="layui-icon edit-icon"  onclick="showBatch(\'MarketPrice\',true)">&#xe642;</i></div>' +
                    '<div id="editTdMarketPrice" hidden class="price"><input id="editTdMarketPriceInput" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" onblur="showBatch(\'MarketPrice\',false)" onchange="batchEdit(\'marketPrice\',this,2)"></div>' +
                    '</th>';
            var costPriceTh = '<th thName="costPrice">' +
                    '<div id="editCostPrice">成本价<i class="layui-icon edit-icon"  onclick="showBatch(\'CostPrice\',true)">&#xe642;</i></div>' +
                    '<div id="editTdCostPrice" hidden class="price"><input id="editTdCostPriceInput" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" onblur="showBatch(\'CostPrice\',false)" onchange="batchEdit(\'costPrice\',this,2)"></div>' +
                    '</th>';
            var inventoryTh = '<th thName="inventory">' +
                    '<div id="editInventory">库存<i class="layui-icon edit-icon"  onclick="showBatch(\'Inventory\',true)">&#xe642;</i></div>' +
                    '<div id="editTdInventory" hidden class="inventory"><input id="editTdInventoryInput" onblur="showBatch(\'Inventory\',false)" onchange="batchEdit(\'inventory\',this,3)"></div>' +
                    '</th>';
            var weightTh = '<th thName="weight">' +
                    '<div id="editWeight">重量<i class="layui-icon edit-icon"  onclick="showBatch(\'Weight\',true)">&#xe642;</i></div>' +
                    '<div id="editTdWeight" hidden class="price"><input id="editTdWeightInput" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" onblur="showBatch(\'Weight\',false)" onchange="batchEdit(\'weight\',this,4)"></div>' +
                    '</th>';
            $("#thParent").empty();
            if (attributes.length < 1) {
                return;
            }
            $("#thParent").append(nameTh);
            $(attributes).each(function (index, attr) {
                var th = '<th  keyId="' + attr.attributeKeyId + '" isAttr="true">' + attr.attributeKey + '</th>';
                $("#thParent").append(th);
            });
            $("#thParent").append(priceTh);
            $("#thParent").append(marketPriceTh);
            $("#thParent").append(costPriceTh);
            $("#thParent").append(inventoryTh);
            $("#thParent").append(weightTh);
        }

        function initSku() {
            initTHead();
            var tBody = $("#skuTBody");
            //获取到了新增的sku
            for (var i = 0; i < skuArray.length; i++) {
                var sku = skuArray[i];
                let nameTd = '<td class="name"><input type="text" tdName="name" lay-verify="required" value="' + sku.name + '"></td>';
                let priceTd = '<td class="price"><input type="text" tdName="price" onchange="changePrice(this)" lay-verify="required"' +
                        ' value="' + sku.price + '"></td>';
                let marketPriceTd = '<td class="price"><input type="text" tdName="marketPrice" onchange="changePrice(this)"' +
                        ' lay-verify="required" value="' + sku.market_price + '"></td>';
                let costPriceTd = '<td class="price"><input type="text" tdName="costPrice" onchange="changePrice(this)" ' +
                        ' lay-verify="required" value="' + sku.cost_price + '"></td>';
                let inventoryTd = '<td class="inventory"><input type="text" tdName="inventory" onchange="changeInventory(this)"' +
                        'lay-verify="required" value="' + sku.inventory + '"></td>';
                let weightTd = '<td class="price"><input type="text" tdName="weight" onchange="changeWeight(this)" lay-verify="required"' +
                        'value="' + sku.weight + '"></td>';

                var skuAttr = sku.skuAttributeList;
                var tr = '<tr skuId="' + sku.id + '">';
                tr += nameTd;
                $(skuAttr).each(function (attrIndex, attribute) {
                    tr += '<td class="attribute-td" isAttr="true" keyName="' + attribute.attributeKey + '"' +
                            ' keyId="' + attribute.attributeKeyId + '" value="' + attribute.attributeValue + '" ' +
                            'title="' + attribute.attributeValue + '">' + attribute.attributeValue + '</td>';
                });
                tr += priceTd + marketPriceTd + costPriceTd + inventoryTd + weightTd;
                tr += '</tr>';
                tBody.append(tr);
            }
            $("#skuInfo").show();
        }

    });
    var initParamDiv = function (parentArea, param, productParam) {
        var type;
        var paramId;
        if (param != null) {
            type = param.type;
            paramId = param.id;
        }
        var inputDiv;
        if (type == paramTypes.TEXT.key || typeof(type) == "undefined") {
            inputDiv = '<div class="layui-form-item" name="param" type="' + type + '" paramName="' + productParam.paramName + '" paramId="' + paramId + '"> ' +
                    '<label class="layui-form-label">' + productParam.paramName + '</label> ' +
                    '<div class="layui-input-inline add-width"> ' +
                    '<input type="text" autocomplete="off" placeholder="请输入' + productParam.paramName + '" class="layui-input " value="' + productParam.value + '"> ' +
                    '</div>' +
                    '<div class="param-add-icon" onclick="deleteParam(this)"> ' +
                    '<i class="layui-icon" style="font-size: 22px;">&#x1007;</i> ' +
                    '</div>' +
                    '</div>';
        } else if (type == paramTypes.SELECT_ONE.key) {
            var values = JSON.parse(param.param);
            inputDiv = '<div class="layui-form-item" name="param" type="' + type + '" paramName="' + param.paramName + '" paramId="' + param.id + '">' +
                    '<label class="layui-form-label">' + param.paramName + '</label>' +
                    '<div class="layui-input-inline add-width">';
            for (var i = 0; i < values.length; i++) {
                if (productParam.value === values[i]) {
                    inputDiv += '<input type="radio" value="' + values[i] + '" title="' + values[i] + '" name="' + param.id + '" checked="checked">'
                } else {
                    inputDiv += '<input type="radio" value="' + values[i] + '" title="' + values[i] + '" name="' + param.id + '">'
                }
            }
            inputDiv += '</div>' +
                    '<div class="param-add-icon" onclick="deleteParam(this)"> ' +
                    '<i class="layui-icon" style="font-size: 22px;">&#x1007;</i> ' +
                    '</div>' +
                    '</div>';
        } else if (type == paramTypes.SELECT_MULTIPLE.key) {
            var pValues;
            try {
                pValues = JSON.parse(productParam.value);
            } catch (e) {
                console.log(e);
                pValues = [];
            }
            var values = JSON.parse(param.param);
            inputDiv = '<div class="layui-form-item" name="param" type="' + type + '" paramName="' + param.paramName + '" paramId="' + param.id + '">' +
                    '<label class="layui-form-label">' + param.paramName + '</label>' +
                    '<div class="layui-input-inline add-width">';
            for (var i = 0; i < values.length; i++) {
                var checkedFlag = '';
                $(pValues).each(function (index, value) {
                    if (value == values[i]) {
                        checkedFlag = 'checked';
                    }
                });
                inputDiv += '<input type="checkbox" title="' + values[i] + '" value="' + values[i] + '" ' + checkedFlag + '>';
            }
            inputDiv += '</div>' +
                    '<div class="param-add-icon" onclick="deleteParam(this)"> ' +
                    '<i class="layui-icon" style="font-size: 22px;">&#x1007;</i> ' +
                    '</div>' +
                    '</div>';
        } else if (type == paramTypes.SELECT_DATE.key) {
            inputDiv = '<div class="layui-form-item" name="param" type="' + type + '" paramName="' + param.paramName + '" paramId="' + param.id + '"> ' +
                    '<label class="layui-form-label">' + param.paramName + '</label> ' +
                    '<div class="layui-input-inline add-width"> ' +
                    '<input type="text" class="layui-input timeParam" placeholder="请选择' + param.paramName + '" value="' + productParam.value + '"> ' +
                    '</div>' +
                    '<div class="param-add-icon" onclick="deleteParam(this)"> ' +
                    '<i class="layui-icon" style="font-size: 22px;">&#x1007;</i> ' +
                    '</div>' +
                    '</div>';
        }
        parentArea.append(inputDiv);
        form.render();
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '.timeParam'//指定元素
            });
        });
    }

</script>
</body>
</html>
